<template>
	<div style="margin-bottom:50px;">	 
		<TopWithBack></TopWithBack>
		 <div class="orders_con_tab" style="margin-top: 50px;">
            <div class="aui-tab" id="tab">
                <div class="aui-tab-item" :class="tabs=='yuyueing' && 'aui-active' " @click="tabClick('yuyueing',0)">预约中</div>
                <div class="aui-tab-item" :class="tabs=='unpay' && 'aui-active' " @click="tabClick('unpay',1)">待付款</div>
                <div class="aui-tab-item" :class="tabs=='serviceing' && 'aui-active' " @click="tabClick('serviceing',2)">服务中</div>
                <div class="aui-tab-item" :class="tabs=='uncomment' && 'aui-active' " @click="tabClick('uncomment',3)">待评价</div>
                <div class="aui-tab-item" :class="tabs=='cancel' && 'aui-active' " @click="tabClick('cancel',4)">取消/退单</div>
              <!--   <div class="aui-tab-item">预约中</div>
                <div class="aui-tab-item">待付款</div>
                <div class="aui-tab-item">服务中</div>
                <div class="aui-tab-item">待评价</div> -->
            </div>
        </div>
        <div class="orders_con_lists" v-for="(item,index) in uncomment" @click="UncommentOrdersDetail(item.id)" v-if="isuncomment == true">
            <div class="orders_con_lists_m">
                <div class="orders_con_lists_m_l">{{item.order_info.store_name}}</div>
                <div class="orders_con_lists_m_r">{{item.order_info.state_str}}</div>
            </div>
            <div class="orders_con_lists_t">
                <div class="orders_con_lists_t_l">订单编号：{{item.order_info.order_sn}}</div>
                <div class="orders_con_lists_t_r"><img src="@/assets/images/go.png" width="10%" alt=""></div>
            </div>
            <div class="orders_con_lists_b">                       
                <!-- <div class="orders_con_lists_b_l" v-show="item.type==1">洗护类型：皮具洗护</div>
                <div class="orders_con_lists_b_l" v-show="item.type==2">洗护类型：皮具修护</div>
                <div class="orders_con_lists_b_l" v-show="item.type==3">洗护类型：鞋类</div> -->
                <div class="orders_con_lists_b_r">￥{{item.order_info.orderfee}}</div>
                <div class="orders_con_lists_b_l" style="color: #29bd5d">待评价</div>
            </div>
            <div style="line-height: 35px;padding-left: 10px;font-size: 12px">下单时间：{{item.order_info.createtime}}</div>
            <div class="index_divide"></div>
        </div>
        <div class="orders_con_lists" v-for="(item,index) in orders" @click="Openorderdetails(item.id)" v-if="isuncomment == false">

            <div class="orders_con_lists_m">
                <div class="orders_con_lists_m_l">{{item.store_info.name}}</div>
                <div class="orders_con_lists_m_r" v-if = "item.refound === 0">{{item.state_str}}</div>
               <!--  <div class="orders_con_lists_m_r" v-show="item.status ==1">预约中</div> -->
                <div class="orders_con_lists_m_r" v-if = "item.refound === 11">{{item.refound_str}}</div>
                <div class="orders_con_lists_m_r" v-if = "item.refound === 12">已取消</div>
                <div class="orders_con_lists_m_r1" v-if = "item.refound === 22">{{item.refound_str}}</div>
                <div class="orders_con_lists_m_r1" v-if = "item.refound === 23">{{item.refound_str}}</div>
                <!-- <div class="orders_con_lists_m_r1" v-show="item.flag==1">待付款</div>
                <div class="orders_con_lists_m_r" v-show="item.flag==2">服务中</div>
                <div class="orders_con_lists_m_r2" v-show="item.flag==3">待评价</div> -->
            </div>
            <div class="orders_con_lists_t">
                <div class="orders_con_lists_t_l">订单编号：{{item.order_sn}}</div>
                <div class="orders_con_lists_t_r"><img src="@/assets/images/go.png" width="10%" alt=""></div>
            </div>
            <div class="orders_con_lists_b">                       
                <!-- <div class="orders_con_lists_b_l" v-show="item.type==1">洗护类型：皮具洗护</div>
                <div class="orders_con_lists_b_l" v-show="item.type==2">洗护类型：皮具修护</div>
                <div class="orders_con_lists_b_l" v-show="item.type==3">洗护类型：鞋类</div> -->
                <div class="orders_con_lists_b_r">￥{{item.orderfee}}</div>
                <div class="orders_con_lists_b_l" style="color: #db0100" v-if="item.is_pay===0">{{item.pay_str}}</div>
                <div class="orders_con_lists_b_l" style="color: #29bd5d" v-if="item.is_pay===1">{{item.pay_str}}</div>
            </div>
            <div style="line-height: 35px;padding-left: 10px;font-size: 12px">下单时间：{{item.createtime}}</div>
            <div class="index_divide"></div>
            
        </div>
        <div v-if="uncomment.length == 0 && isuncomment == true" style="text-align: center;margin-top: 30%"> 
            <div><img src="@/assets/images/nolist.png" alt="" width="30%"></div> 
                您还没有订单信息
            </div>
        <div v-if="orders.length == 0 && isuncomment == false" style="text-align: center;margin-top: 30%">
            <div><img src="@/assets/images/nolist.png" alt="" width="30%"></div> 
            您还没有订单信息
        </div>     
    </div>
</template>
<script>
import TopWithBack from './../common/TopWithBack.vue'
import { loadOrders,loadOrdersUnComment } from '@/api/allapis'
export default{
    name: 'PcOrders',
    data(){
        return{
            orders: [],//订单列表 
            tabs:'',//订单类型
            tabindex:0,//订单类型索引
            isuncomment:false,//为false时不拉取未评价列表，true时拉取未评价列表
            uncomment:[],//待评价订单列表
            param:{
                page:1,//页数
                rows:60,//拉取订单数
                screen:''//订单类型
            }//请求数据所传参数           
        }
    },
    methods:{
        //拉取订单列表
        loadData(){
            this.$vux.loading.show({ text: 'Loading' })
            loadOrders(this.param).then(response=>{
                this.isuncomment = false;
                this.orders = response.data.list
                this.$vux.loading.hide()
            })
        },
        //切换订单类型
        tabClick(value,index){
            this.param.screen = value
            this.tabs = value
            if(value=="uncomment"){
                this.loadDataUncomment()
            }else{
                this.loadData()
            }
            
        },
        //拉取未评价订单列表
        loadDataUncomment(){
            this.$vux.loading.show({ text: 'Loading' })
            loadOrdersUnComment(this.param).then(response=>{
                this.isuncomment = true;
                this.uncomment = response.data.list
                this.$vux.loading.hide()
            })
        },
        //订单详情
        Openorderdetails(id,index){
            // console.log(id)
            this.$router.push({
                path: `/goodinfo/${id}`
            })
        },
        //打开未评价订单详情
        UncommentOrdersDetail(id){
            this.$router.push({
                path: `/uncomment/${id}`
            }) 
        },
    },
    created(){
        this.param.screen = this.$route.params.type//
        this.tabs = this.$route.params.type
        // console.log(this.param.screen)
        if(this.param.screen == 'uncomment'){
            this.loadDataUncomment()  
        }else{
            this.loadData()
        }
    },
  components:{
  	TopWithBack,
  }
}
</script>
<style>
.home{
  font-size:50px;
}
</style>


